<template>
  <ElCard
    style="max-width: 480px; margin-bottom: 20px; cursor: pointer"
    v-for="item in currentRow"
    :key="item.uuid"
    @click="ShowDetail(item)"
  >
    <template #header>
      <div class="card-header">
        <i>{{ item.eventDes }}</i>
        <span v-for="i in DictStore.$state.event_state" :key="i.dictValue">
          <ElTag v-if="i.dictValue == item.eventState" :type="i.listClass" class="TagStyle">{{
            i.dictLabel
          }}</ElTag>
        </span>
      </div>
    </template>
    <p class="TextSyle">{{ item.address }}</p>
    <p class="TextSyle">
      <i>{{ item.createBy }}</i
      ><i>{{ item.createTime }}</i>
    </p>
  </ElCard>
  <Dialog v-model="dialogVisible" title="详情">
    <Detail :detail-schema="allSchemas.detailSchema" :current-row="Data" />
  </Dialog>
</template>
<script lang="tsx" setup>
import { Dialog } from '@/components/Dialog'
import { EmergencyEventType } from '@/api/Emergency/type'
import { reactive, ref, inject } from 'vue'
import { ElCard, ElTag } from 'element-plus'
import { useDictStore } from '@/store/modules/dictData'
import { PropType } from 'vue'
import Detail from '../../../Emergency/components/Detail.vue'
import { useI18n } from '@/hooks/web/useI18n'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
const dialogVisible = ref(false)
const { t } = useI18n()
const Fun: any = inject('SetHideDangerCenter')
const Data = ref({})
const DictStore = useDictStore()
defineProps({
  currentRow: {
    type: Object as PropType<Nullable<EmergencyEventType[]>>,
    default: () => null
  }
})
const crudSchemas = reactive<CrudSchema[]>([
  {
    field: 'selection',
    type: 'selection',
    form: {
      hidden: true
    },
    detail: {
      hidden: true
    },
    fixed: 'left'
  },
  {
    field: 'index',
    label: t('tableDemo.index'),
    type: 'index',
    fixed: 'left',
    form: {
      hidden: true
    },
    detail: {
      hidden: true
    }
  },
  {
    field: 'eventState',
    label: t('状态'),
    width: 150,
    detail: {
      slots: {
        default: (data: any) => {
          return DictStore.$state.event_state?.map((item) => {
            if (item.dictValue == data.eventState) {
              return <ElTag type={item.listClass}>{t(item.dictLabel)}</ElTag>
            }
          })
        }
      }
    },
    table: {
      hidden: false
    }
  },
  {
    field: 'serialNo',
    label: t('工单编号'),
    width: 150,
    detail: {
      hidden: false
    }
  },
  {
    field: 'hazardLevel',
    label: t('隐患等级'),
    width: 150,
    detail: {
      slots: {
        default: (data: any) => {
          return DictStore.$state.hazard_level?.map((item) => {
            if (item.dictValue == data.hazardLevel) {
              return item.dictLabel
            }
          })
        }
      }
    }
  },
  {
    field: 'eventGroup',
    label: t('工单归属'),
    width: 150,
    detail: {
      slots: {
        default: (data: any) => {
          return DictStore.$state.event_group?.map((item) => {
            if (item.dictValue == data.eventGroup) {
              return item.dictLabel
            }
          })
        }
      }
    }
  },
  {
    field: 'eventId',
    label: t('事件类型'),
    width: 100
  },
  {
    field: 'hazardType',
    label: t('隐患类型'),
    width: 150,
    detail: {
      slots: {
        default: (data: any) => {
          return DictStore.$state.hazard_type?.map((item) => {
            if (item.dictValue == data.hazardType) {
              return item.dictLabel
            }
          })
        }
      }
    }
  },
  {
    field: 'contacts',
    label: t('联系人'),
    width: 100
  },
  {
    field: 'contactPhone',
    label: t('联系电话'),
    width: 150
  },
  {
    field: 'address',
    label: t('事件描述'),
    width: 150,
    detail: {
      span: 24
    }
  },
  {
    field: 'address',
    label: t('事件地址'),
    width: 150,
    detail: {
      span: 24
    }
  },
  {
    field: 'createBy',
    label: t('创建人'),
    width: 100
  },
  {
    field: 'createTime',
    label: t('创建时间'),
    width: 200,
    detail: {
      span: 24
    }
  }
])
const { allSchemas } = useCrudSchemas(crudSchemas)
const ShowDetail = (data) => {
  Fun(data.lon, data.lat)
  Data.value = data
  dialogVisible.value = true
}
</script>
<style scoped lang="less">
i {
  font-style: normal;
}
.TextSyle {
  font-size: 12px;
  padding: 5px 0px;
  display: flex;
  justify-content: space-between;
}
:deep(.el-card__body) {
  padding: 10px !important;
}
:deep(.el-card__header) {
  width: 100%;
  background: #fff !important;
  color: black !important;
  font-weight: 600;
  font-size: 14px !important;
  display: flex;
  justify-content: space-between;
}
:deep(.TagStyle) {
  position: absolute;
  right: 10px;
}
:deep(.el-card__body) {
  height: auto !important;
  overflow: hidden !important;
}
</style>
